<template>

  <a-card
    class="administrantion"
    :bordered="animated">
    <a-tabs
      :animated="animated"
      defaultActiveKey="1">
      <a-tabPane
        tab="发票记录"
        key="1"
      >
        <Records />
      </a-tabPane>

      <a-tabPane
        tab="开票类目管理"
        key="2"
      >
        <Email />
      </a-tabPane>
    </a-tabs>
  </a-card>
</template>

<script>
import { STable, Ellipsis } from '@/components'

import Email from './components/billEmail'
import Records from './components/billRecords'
import { getRechargeOrder, getTaxOptimal, getListInvoiceType, getBillNews, queryInvoiceMailAddrList, addInvoiceRecord } from '@/api/manage'
import { formatMoney } from '@/filter/index.js'

export default {
  components: {
    STable,
    Ellipsis,
    Email,
    Records
  },
  data() {
    return {
      animated:false,
      visible: false,
      billList: {},
      queryParam: {},
      columns: [
        {
          title: '订单ID',
          dataIndex: 'orderId',
          key: 'orderId',
        },
        {
          title: '可开票金额',
          dataIndex: 'totalFee',
          customRender: (totalFee) => '￥' + formatMoney(totalFee),
          key: 'totalFee',
        },
        {
          title: '订单时间',
          dataIndex: 'createdTime',
          key: 'createdTime',
        },
      ],
      loadData: parameter => {
        // return getPaymentList(Object.assign(parameter, this.queryParam))
        //   .then(res => {
        //     return res.resData
        //   })
        return getRechargeOrder()
          .then(res => {
            console.log(res)
            return res.resData
          })
      },
      options: {
        alert: { show: true, clear: () => { this.selectedRowKeys = [] } },
        rowSelection: {
          selectedRowKeys: this.selectedRowKeys,
          onChange: this.onSelectChange
        }
      },
      selectedRowKeys: [],
      selectedRows: [],
      invoiceOptions: [],
      omsUserInvoice: {},
      invoiceAddressList: [],
      addressOptions: [],
      addressValue: '',
      feeType: '',
      invoiceId: ''
    }
  },
  computed: {
    totalFeeMoney: function () {
      let total = 0
      this.selectedRows.forEach(item => {
        total += item.totalFee
      })
      return formatMoney(total)
    }
  },
  mounted() {
    this.getOptimal()
  },
  methods: {

    onChange(data) {
      console.log(data)
      this.addressValue = data
    },
    Change(data) {
      console.log(data)
      this.feeType = data
    },
    change(data) {
      console.log(data)
      this.invoiceId = data
    },
    // 取消
    handleCancel() {
      // this.form.resetFields()
      this.visible = false
    },
    // 确定
    handleSubmit() {
      const ids = this.selectedRows.map(item => item.orderId)
      if (this.feeType === 0) {
        this.feeType = '增值税普通发票'
      } else {
        this.feeType = '增值税专用发票'
      }
      const data = {
        feeType: this.feeType,
        invoiceId: this.invoiceId,
        invoiceMailAddrId: this.addressValue,
        orderId: ids.join(',')
      }
      addInvoiceRecord(data)
        .then(() => {
          this.$message.success('发票索取成功')
          this.invoiceId = ''
          this.addressValue = ''
          this.feeType = ''
          // this.visible = false
        })
        .catch(error => {
          this.$notify.error({
            title: '处理失败',
            message: error
          })
        })
    },
    handleGetInvoice() {
      if (this.selectedRows.length === 0) {
        this.$message.error('请先选择发票')
        return
      }
      this.visible = true
    },
    getOptimal() {
      getListInvoiceType()
        .then(res => {
          console.log(res)
          this.invoiceOptions = res.resData
        })
      getBillNews()
        .then(res => {
          console.log(res)
          this.omsUserInvoice = res.resData
        })
      queryInvoiceMailAddrList()
        .then(res => {
          console.log(res)
          this.invoiceAddressList = res.resData.content
          this.addressOptions = this.invoiceAddressList.map(item => {
            return {
              value: item.id,
              label: item.province + item.city + item.area + item.addrs
            }
          })
        })
      getTaxOptimal()
        .then(res => {
          if (res.resData.canOpenBill === null) {
            res.resData.canOpenBill === 0
          }
          if (res.resData.openBill === null) {
            res.resData.openBill === 0
          }
          console.log(res)
          this.billList = res.resData
          return res.resData
        })

    },
    onSelectChange(selectedRowKeys, selectedRows) {
      console.log(selectedRowKeys)
      console.log(selectedRows)
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },
  }
}
</script>

<style>
.administrantion .ant-card-body{
  padding-top: 0;
}
.administrantion .ant-card-bordered{
  border: none;
}
.can {
  color: #1890ff;
}
.total {
  height: 22px;
  font-size: 16px;
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
  line-height: 22px;
  /* margin-top: 20px; */
  margin-bottom: 20px;
}
.title {
  font-size: 14px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.85);
  line-height: 22px;
  margin-bottom: 8px;
}
.title-margin {
  font-size: 14px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.85);
  line-height: 22px;
  margin-bottom: 8px;
  margin: 24px 0 8px;
}
.info {
  height: 22px;
  font-size: 14px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.65);
  line-height: 22px;
  margin-bottom: 0px;
}
</style>
